<!-- script 脚本标签， 脚本  脚本语言， JavaScript  Java --> 
 <!-- python  java  c  linux   C语言 C语言之父 美国人 谭浩强 C  -->

 <script   setup>
import { ref } from 'vue'
const radio1 = ref('1')
const value = ref('')
const value2 = ref('')
const value3 = ref('')
const value4 = ref('')
const radio6 = ref('')
const options = [
  {
    value: '研究生',
    label: '研究生',
  },
  {
    value: '本科',
    label: '本科',
  }
]
const options2 = [
  {
    value: '在校学生',
    label: '在校学生',
  },
  {
    value: '走读学生',
    label: '走读学生',
  }
]
const options3 = [
  {
    value: '帝都',
    label: '帝都',
  },
  {
    value: '城市',
    label: '城市',
  },
  {
    value: '乡村',
    label: '乡村',
  }
]
</script>

<!-- template html -->

<template>
  <h1><div>注册新用户</div></h1>
  <el-card style="max-width: 480px">
    <el-form
    style="max-width: 600px"
    status-icon
    label-width="auto"
    class="demo-ruleForm"
  >
   <label for="">用户名</label>
   <input type="text" name="" id="uname">
    <br>
   <label for="">登录邮箱</label>
   <input type="email" name="" id="uemail">
    <br>
   <label for="">密码</label>
   <input type="password" name="''" id="umima">
    <br>
   <label for="">再输一次</label>
   <input type="password" name="" id="u1mima">
    <br>
<hr>
   <el-text class="mx-1" size="large">个人资料</el-text>
   <br>
   <el-radio-group v-model="radio1">
      <el-radio value="1" size="large">男士</el-radio>
      <el-radio value="2" size="large">女士</el-radio>
    </el-radio-group>

   </el-form>
   <label for="">学历</label>
   <el-select v-model="value" placeholder="Select" style="width: 240px">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
<br>
   <label for="">职业</label>
   <el-select v-model="value2" placeholder="Select" style="width: 240px">
    <el-option
      v-for="item in options2"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
<br>
    <label for="">所在城市</label>
   <el-select v-model="value3" placeholder="Select" style="width: 240px">
    <el-option
      v-for="item in options3"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
<br>
<label for="">出生年月</label>
<el-select v-model="value4" placeholder="Select" style="width: 120px">
    <el-option
      v-for="item in options4"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
  <el-select v-model="value5" placeholder="Select" style="width: 120px">
    <el-option
      v-for="item in options5"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
        <br>

  <label for="">猜你喜欢</label>
  
    <el-checkbox v-model="checked1" label="体育" size="large" />
    <el-checkbox v-model="checked2" label="音乐" size="large" />
    <el-checkbox v-model="checked3" label="游戏" size="large" />
    <el-checkbox v-model="checked4" label="八卦" size="large" />
    <el-checkbox v-model="checked5" label="吐槽" size="large" />

<br>
<el-radio-group v-model="radio6">
<el-radio value="6" size="large">我已仔细阅读并接受
  <el-link underline="always">注册条款</el-link>
</el-radio></el-radio-group>

<br>



<el-button type="info" plain>注册</el-button>
<el-button type="info" plain>重置</el-button>


  </el-card>
</template>

<!-- 样式 css scss stylue -->
<style scoped>

</style>